<template>
  <div class="wrap goods">
    <Crumb> </Crumb>
    <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
    <div id="play"></div>
  </div>
</template>

<script type='text/ecmascript-6'>
import Crumb from "../components/Crumb.vue";
import Player from "xgplayer";
export default {
  mounted() {
    let player = new Player({
      id: "play", //标签的id名或者 使用 el:dom元素
      url: "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
      videoInit: true,
      poster: "http://pic1.win4000.com/wallpaper/4/580ecd9ae98cf.jpg",
      controls: false,
      playbackRate: [0.5, 0.75, 1, 1.5, 2],
      whitelist: [""],
      fluid: false,
      width: "100%",
      height: "300px",
      fitVideoSize: "auto", //自适应视频内容宽高
      volume: 0.3, //音量，0~1
      autoplay: false, //自动播放
      controls: true, //控制条
    });
  },
  components: {
    Crumb,
  },
};
</script>

<style lang = "less" scoped>
@import "../assets/css/public.less";
.goods {
  padding-bottom: 50px;
  /* background: #efefef; */
  padding-top: 20px;
}
#play {
  margin-top: 20px;
}
</style>